<template>
  <div class="app-container" v-loading="loading">
    <leaseContract state="detail" v-model="form" ref="leaseContract" />
    <historicalRecord state="write" v-model="form" ref="historicalRecord" />
    <div style="text-align: right; box-sizing: border-box; padding-right: 20px; margin-top: 20px; background-color: #fff; width: 100%; height: 60px; line-height: 60px; border-radius: 8px">
      <el-button @click="cancel">返 回</el-button>
    </div>
  </div>
</template>
<script>
import leaseContract from './components/leaseContract'
import historicalRecord from './components/historicalRecord'
import { replacementCarRecording } from '@/api/vehicleOrder'
export default {
  name: 'CarReplacementServiceDetail',
  components: {
    historicalRecord,
    leaseContract,
  },
  data() {
    return {
      loading: false,
      form: {
        recordList: [],
      },
    }
  },
  created() {
    this.replacementCarRecording()
  },
  methods: {
    async replacementCarRecording() {
      let params = {
        orderId: this.$route.query.orderId,
      }
      this.loading = true
      try {
        let res = await replacementCarRecording(params)
        this.loading = false
        let { data, code } = res
        if (code == 200) {
          this.form = {
            recordList: data,
            mainOrderCode: data && data[0]?.mainOrderCode,
            orderCarCode: data && data[0]?.orderCarCode,
            contractStartTime: data && data[0]?.contractStartTime,
            contractEndTime: data && data[0]?.contractEndTime,
            dailyRent: data && data[0]?.dailyRent,
            deposit: data && data[0]?.deposit,
            customerName: data && data[0]?.customerName,
            oldCarNo: data && data[0]?.oldCarNo,
            replacementCode: data && data[0]?.replacementCode,
            carType: this.$route.query.carType,
            orderId: this.$route.query.IdOrder,
            calcSchemeId: this.$route.query.calcSchemeId,
          }
        }
      } catch (error) {
        this.loading = false
      }
    },
    cancel() {
      this.$tab.closeOpenPage(this.$route)
      this._toPage({
        name: 'SuborderView',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  box-sizing: border-box;
  padding-left: 30px;
}
</style>
